<template>
  <div class="email-verification">
    <h2>Change Phone Number</h2>
    <el-form label-position="left" label-width="200px" :model="phoneForm">
      <el-form-item label="Country Code">
        <el-select v-model="phoneForm.country_code" placeholder="Thailand" @input="testAndVerify">
          <el-option v-for="item in areaCode" :key="item.value" :label="item.value" :value="item.key">
            <span style="float: left">{{ item.value }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.key }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="New Phone Number">
        <el-input v-model="phoneForm.newphone" placeholder="Enter your Phone"  @input="testAndVerify"></el-input>
      </el-form-item>
      <el-form-item label="New SMS Code">
        <el-input v-model="phoneForm.new_sms_code" class="email-code" placeholder="Enter Phone Code"  @input="testAndVerify"></el-input>
        <div class="sent-code" v-if="phoneForm.newphone != ''">
          <span>sent to</span>
          {{phoneForm.newphone | hideMobileInfo}}
        </div>
        <el-button type="warning" plain class="get-code" ref="phoneCode" @click="getEnailCode('phoneCode', 1)" >Get Code</el-button>
      </el-form-item>
      <el-form-item label="SMS Code">
        <el-input v-model="phoneForm.sms_code" class="email-code" placeholder="Phone SMS Code"  @input="testAndVerify"></el-input>
        <div class="sent-code">
          <span>sent to</span>
          {{someinfo.phone | hideMobileInfo}}
        </div>
        <el-button type="warning" class="get-code" ref="newCode" @click="getEnailCode('newCode', 0)" plain>Get Code</el-button>
      </el-form-item>
      <el-form-item>
        <el-button :type="primary" :disabled="confirmdb" class="email-confirm" @click="changeNewPhone">CONFIRM</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { resend } from "@/filter/index";
import { verCode } from "@/api/userLogin";
import { changePhone } from "@/api/kycAttest";
import { areaCode } from "@/assets/js/country";
export default {
  data() {
    return {
      phoneForm: {
        country_code: "",
        newphone: "",
        new_sms_code: "",
        sms_code: ""
      },
      confirmdb: true,
      primary: 'info',
      areaCode: areaCode
    };
  },
  computed: {
    ...mapGetters({
      someinfo: "someinfo"
    })
  },
  methods: {
    /**
     * [getEnailCode description]
     * 获取验证码
     * --------------------------
     * @Author   LLP
     * @DateTime 2019-12-24T18:16:23+0800
     * @param    {[type]}                 code [description]
     * @param    {[type]}                 type [description]
     * @return   {[type]}                      [description]
     */
    async getEnailCode(code, type) {
      if (type) {
        if (this.phoneForm.newphone === '') {
          this.$message({
            message: 'Please enter your phone account.',
            type: 'warning'
          });
        } else {
          resend(this.$refs[code])
          let param = {
            type: '05',
            phone: this.phoneForm.country_code + this.phoneForm.newphone
          }
          let {data} = await verCode(param)
          if (data === null) {
              this.$message({
                message: 'The verification code has been sent, please check.',
                type: 'success'
            });
          }
        }
      } else {
        resend(this.$refs[code])
        let param = {
          type: '05',
          phone: this.someinfo.phone
        }
        let {data} = await verCode(param)
        if (data === null) {
            this.$message({
              message: 'The verification code has been sent, please check.',
              type: 'success'
          });
        }
      }
    },
    /**
     * [changeNewPhone description]
     * 修改手机号
     * ------------------------------
     * @Author   LLP
     * @DateTime 2019-12-24T18:31:00+0800
     * @return   {[type]}                 [description]
     */
    async changeNewPhone() {
      let param = {
        ...this.phoneForm,
        newphone: this.phoneForm.country_code + this.phoneForm.newphone
      }
      let { data } = await changePhone(param)
      if (data === null) {
        this.$message({
          message: 'The mobile number has been modified successfully.',
          type: 'success'
        });
        this.$store.dispatch('setsomeinfo')
        this.$router.push({ path: '/account' })
      }
    },
    /**
     * [testAndVerify description]
     * 按钮是否可操作
     * ----------------------------
     * @Author   LLP
     * @DateTime 2019-12-24T18:07:38+0800
     * @return   {[type]}                 [description]
     */
    testAndVerify() {
      let from = this.phoneForm
      if (from.country_code !="" && from.newphone !="" && (from.new_sms_code !="" && from.sms_code)) {
        this.confirmdb = false
        this.primary = 'primary'
      } else {
        this.confirmdb = true
        this.primary = 'info'
      }
    }
  }
};
</script>
<style lang="less" scoped>
.email-verification {
  height: 100vh;
  h2 {
    font-size: 26px;
    display: inline-block;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 2px solid #edf0f4;
  }
  .el-form {
    padding: 45px 160px 0 0;
    .el-form-item {
      margin-bottom: 40px;
    }
    .email-code {
      width: 450px;
      margin-right: 38px;
      display: inline-block;
    }
    .get-code {
      width: 105px;
    }
    .email-confirm {
      width: 100%;
    }
    .sent-code {
      position: absolute;
      top: -30px;
      right: 0;
      p {
        font-weight: 600;
        display: inline-block;
        padding-left: 10px;
      }
    }
  }
}
</style>